import React from 'react';
import SearchBar from 'antd-mobile/lib/search-bar';
import Modal from 'antd-mobile/lib/modal';
import { Link } from 'react-router-dom';
import './index.less';
import Icon from '../base/Icon/index';

const alert = Modal.alert;

const backPerPage = () => {
  __self.history.goBack();
}

export default class HeaderNav extends React.PureComponent {
  static defaultProps = {
    showSearch: true
  }
  constructor(props){
    super(props);
  }

  Logout = () => {
    alert('退出登录', '', [
      { text: '取消', onPress: () => '', style: 'default' },
      {
        text: '确定', onPress: () => {
          window.localStorage.userInfo = ''
          location.reload();
        }
      },
    ]);
  }

  render() {
    const { showSearch, title, showBackLink = true, onMenuButton } = this.props;
    const userInfo = window.localStorage.getItem('userInfo');

    return (
      <div className="header-nav">
        {showBackLink && <a className="back-button" onClick={backPerPage}>返回</a>}
        {onMenuButton && <span onClick={onMenuButton}><Icon type="caidan" /></span>}
        {
          showSearch ?
            <SearchBar
              placeholder="商品名称"
              onSubmit={value => console.log(value, 'onSubmit')}
              onBlur={() => console.log('onBlur')}
              showCancelButton={false}
            />
            :
            <span className="header-title">{title}</span>
        }
        {
          userInfo ?
            <span className="login" onClick={this.Logout}><Icon type="wode" /></span>
            :
            <Link className="login" to="/Login">登录</Link>
        }
      </div>
    )
  }
}
